<button nz-button nzType="primary" (click)="showModal(null)">新增</button>
<!-- <button nz-button nzType="primary" nzDanger (click)="onDelete()">删除</button> -->
<!-- <button nz-button nzType="primary" (click)="setUrlPermission()">
  设置权限
</button> -->
<!-- <button nz-button nzType="primary" (click)="checkUrlPermission()">
  查看权限
</button> -->
{{total}}
<nz-table
  #headerTable
  [nzData]="listOfCurrentPageData"
  [nzPageSize]="pageable.size"
  nzFrontPagination="false"
  [nzScroll]="{ y: 'calc(100vh - 330px)' }"
  [nzPageIndex]="nzPage"
  nzServerRender="true"
  [nzTotal]="total"
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
  (nzPageIndexChange)="onPageIndexChange($event)"
  nzShowPagination
  nzShowSizeChanger
>
  <thead>
    <tr>
      <!-- <th
        nzWidth="60px"
        [nzChecked]="checked"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="onAllChecked($event)"
      ></th> -->
      <th>名称</th>
      <th nzWidth="30%">路径</th>
      <th nzWidth="100px">请求方法</th>
      <th nzWidth="100px">权限</th>
      <th>Client ID</th>
      <th>scope</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of headerTable.data">
      <!-- <td
        [nzChecked]="setOfCheckedId.has(data.id)"
        (nzCheckedChange)="onItemChecked(data.id, $event)"
      ></td> -->
      <td>{{ data.name }}</td>
      <td>{{ data.uri }}</td>
      <td>{{ data.method }}</td>
      <td>{{ data.permission }}</td>
      <td>{{ data.clientId }}</td>
      <td><nz-tag
        [nzColor]="'blue'"
        nzMode="closeable"
        *ngFor="let scopeApi of data.scopes"
        (nzOnClose)="removeScopes(scopeApi.id, $event)"
        >{{ scopeApi.scope.name }}</nz-tag
      ></td>
      <td>
        <a nz-tooltip nzTooltipTitle="编辑" (click)="showModal(data)"
          ><i nz-icon nzType="edit" nzTheme="outline"></i
        ></a>
        <a
          style="color: red"
          nz-tooltip
          nzTooltipTitle="删除"
          (click)="deleteApi(data.id)"
          ><i nz-icon nzType="delete" nzTheme="outline"></i
        ></a>
        <a
          nz-tooltip
          nzTooltipTitle="设置scoope"
          (click)="showPermissionModal(data)"
          ><i nz-icon nzType="lock" nzTheme="outline"></i
        ></a>
      </td>
    </tr>
  </tbody>
</nz-table>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="新增"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="submitForm()"
>
  <ng-container *nzModalContent>
    <form nz-form nzLayout="vertical" [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>路径</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="uri" placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>请求方法</nz-form-label>
        <nz-form-control nzErrorTip="">
          <nz-select formControlName="method">
            <nz-option
              *ngFor="let method of httpMethods"
              [nzValue]="method"
              [nzLabel]="method"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>权限</nz-form-label>
        <nz-form-control nzErrorTip="">
          <nz-select formControlName="permission">
            <nz-option
              *ngFor="let urlPermission of urlPermissions"
              [nzValue]="urlPermission"
              [nzLabel]="urlPermission"
            >
            </nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>Client ID</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="clientId" placeholder="" />
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForPermission"
  nzTitle="授权"
  (nzOnOk)="addScopes()"
  (nzOnCancel)="handlePermissionCancel()"
>
  <ng-container *nzModalContent>
    拟授权URL:
    {{ selectedApi.name }}
    <br />
    授权角色列表：
    <app-scope-search></app-scope-search>
  </ng-container>
</nz-modal>
